<template>
	<swiper class="banner" :indicator-dots="true" indicator-color="#ff8198" indicator-active-color="#eee" :autoplay="true" :interval="3000" :duration="1000">
		<template v-for="item in banner" :key="item">
			<swiper-item @click="handleItemClick(item.link)">
				<image class="item" :src="item.image" mode="widthFix" alt=""></image>
			</swiper-item>
		</template>
	</swiper>
</template>

<script setup>
	// 接收父组件传来的参数
	const props = defineProps({
		banner: {
			type: Array,
			default: () => []
		}
	})
	
	const emits = defineEmits(["itemClick"])
	function handleItemClick(link) {
		emits('itemClick', link)
	}
</script>

<style lang="scss">
	.banner {
		image {
			width: 100%;
		}
	}
</style>